<template>
  <div style="width: 100%; height: 100%">
    <div id="chart-4" style="width: 100%; height: 550px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["myStart", "myEnd"],
  data() {
    return {
      start: this.myStart,
      end: this.myEnd,
      companyName: [],
      bachelorNum: [],
      masterNum: [],
      chart: null,
      option: null,
    };
  },
  mounted() {
  },
  computed: {
    myChart() {
      return echarts.init(document.getElementById("chart-4"));
    },
  },
  created() {
    if (!this.start || !this.end) {
      this.axios({
        url: "grad/yearList",
        methods: "get",
      }).then((res) => {
        let years = res.data.data;

        years = years.sort(function (a, b) {
          return a - b;
        });

        //默认为最近一年
        this.start = years[years.length - 1];
        this.end = years[years.length - 1];

        this.getOrg(this.start, this.end);
      });
    } else {
      this.getOrg(this.start, this.end);
    }
  },
  watch: {
    myStart(val) {
      this.start = val;
    },
    myEnd(val) {
      this.end = val;
    },
  },
  computed: {
    myChart() {
      return echarts.init(document.getElementById("chart-4"));
    },
  },
  methods: {
    getOrg(start, end) {
      this.axios({
        url: "grad/org_name_total",
        methods: "get",
        params: {
          start: start,
          end: end,
        },
      })
        .then((res) => {
          let tableData = res.data.data;
          console.log("tablefive", tableData)
          this.companyName = [];
          this.bachelorNum = [];
          this.masterNum = [];
          for (let i = 0; i < tableData.length; i++) {
            this.companyName.push(tableData[i].term);
            this.bachelorNum.push(tableData[i].bachelorNum);
            this.masterNum.push(tableData[i].masterNum);
          }

          this.option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            toolbox: {
              x: 975,
              feature: {
                saveAsImage: { show: true },
              },
            },
            legend: {
              data: ["本科生", "研究生"],
              bottom: "bottom",
            },
            grid: {
              height: 450,
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                data: this.companyName,
                axisLabel: {
                  interval: 0,
                  rotate: 40,
                },
              },
            ],
            yAxis: [
              {
                type: "value",
              },
            ],
            series: [
              {
                name: "本科生",
                type: "bar",
                barWidth: 30,
                stack: "广告",
                emphasis: {
                  focus: "series",
                },
                data: this.bachelorNum,
              },
              {
                name: "研究生",
                type: "bar",
                barWidth: 30,
                stack: "广告",
                emphasis: {
                  focus: "series",
                },
                data: this.masterNum,
              },
            ],
          };
          this.drawChart();
        })
        .catch((err) => {
          console.log(err);
        })
        // .then((res) => {
        //   console.log("tablefive:", res)
        //   let tableData = res.data.data;
        //   this.companyName = [];
        //   this.bachelorNum = [];
        //   this.masterNum = [];
        //   for (let i = 0; i < tableData.length; i++) {
        //     this.companyName.push(tableData[i].term);
        //     this.bachelorNum.push(tableData[i].bachelorNum);
        //     this.masterNum.push(tableData[i].masterNum);
        //   }
        //   this.$nextTick(() => {
        //     this.drawChart();
        //   });
        // })
        // .catch((err) => {
        //   console.log(err);
        // });
    },
    drawChart() {
      echarts.init(document.getElementById("chart-4")).dispose();
      this.myChart = echarts.init(document.getElementById("chart-4"));
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        toolbox: {
          x: 975,
          feature: {
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["本科生", "研究生"],
          bottom: "bottom",
        },
        grid: {
          height: 450,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.companyName,
            axisLabel: {
              interval: 0,
              rotate: 40,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "本科生",
            type: "bar",
            barWidth: 30,
            stack: "广告",
            emphasis: {
              focus: "series",
            },
            data: this.bachelorNum,
          },
          {
            name: "研究生",
            type: "bar",
            barWidth: 30,
            stack: "广告",
            emphasis: {
              focus: "series",
            },
            data: this.masterNum,
          },
        ],
      };
      this.myChart.setOption(option);
    },
    resize() {
      this.myChart.resize();
    },
  },
};
</script>
